<script setup lang="ts" name="columnsIndex">
import { onMounted } from 'vue'
import useColumnIndex from '@/components/index/columns/hooks/columnIndex'
const { cardMsg, route, columnData, column, clickTosearchArticle, starColumn } = useColumnIndex()
onMounted(() => {
  column(route.query.key as string)
  clickTosearchArticle(route.query.key as string)
})
</script>

<template>
  <div id="columnsIndex">
    <ul class="column-msg">
      <li>{{ '标识：' + columnData.id }}</li>
      <li>{{ '创建时间：' + columnData.createdTime }}</li>
      <li>{{ 'By：' + columnData.createrName }}</li>
      <li @click="starColumn(columnData.id)">
        <StarFilled class="svg" v-if="columnData.isCollected" />
        <Star class="svg" v-else />
      </li>
    </ul>
    <component :is="cardMsg"></component>
  </div>
</template>

<style scoped>
.svg {
  height: 24px;
  width: 24px;
}
.column-msg {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-content: center;
  justify-items: center;
  padding-bottom: 6px;
  li {
    color: var(--color2);
  }
  li:last-of-type {
    cursor: pointer;
    padding: 0 6px;
    justify-self: end;
    border: 2px solid var(--color2);
    border-radius: var(--radius);
  }
  li:last-of-type:hover {
    border: 2px solid var(--color3);
    border-radius: var(--radius);
  }
}
</style>
